<!DOCTYPE html>
<html>
<head>
	<title>运输轨迹监控 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<!-- 高德地图 -->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=18650c5819bbc65ca105226be4b75acd&plugin=AMap.Driving"></script>
	<style>
		.monitor-container {
			padding: 20px;
			max-width: 1600px;
			margin: 0 auto;
		}
		.control-panel {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.map-section {
			height: 600px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			overflow: hidden;
			position: relative;
		}
		#amap-container {
			width: 100%;
			height: 100%;
		}
		.vehicle-list {
			position: absolute;
			top: 20px;
			right: 20px;
			width: 350px;
			max-height: 560px;
			background: rgba(255,255,255,0.95);
			border-radius: 12px;
			padding: 20px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.15);
			overflow-y: auto;
			z-index: 1000;
		}
		.vehicle-item {
			padding: 15px;
			margin-bottom: 15px;
			border: 2px solid #e4e7ed;
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
		}
		.vehicle-item:hover {
			border-color: #409EFF;
			box-shadow: 0 4px 12px rgba(64,158,255,0.2);
		}
		.vehicle-item.active {
			border-color: #67C23A;
			background: #f0f9ff;
		}
		.vehicle-item.offline {
			border-color: #F56C6C;
			background: #fef0f0;
		}
		.vehicle-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
		.vehicle-number {
			font-weight: bold;
			color: #333;
			font-size: 16px;
		}
		.status-badge {
			padding: 4px 8px;
			border-radius: 12px;
			font-size: 12px;
			font-weight: bold;
		}
		.status-online {
			background: #e1f3d8;
			color: #67c23a;
		}
		.status-offline {
			background: #fef0f0;
			color: #f56c6c;
		}
		.status-warning {
			background: #fdf6ec;
			color: #e6a23c;
		}
		.vehicle-info {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
		}
		.temp-display {
			display: flex;
			align-items: center;
			margin-top: 8px;
		}
		.temp-value {
			font-size: 18px;
			font-weight: bold;
			margin-left: 5px;
		}
		.temp-normal {
			color: #67C23A;
		}
		.temp-warning {
			color: #E6A23C;
		}
		.temp-danger {
			color: #F56C6C;
		}
		.stats-section {
			margin-top: 20px;
		}
		.stat-card {
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			text-align: center;
			transition: all 0.3s ease;
		}
		.stat-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		}
		.stat-number {
			font-size: 32px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.refresh-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			z-index: 2000;
		}
		.vehicle-detail-popup {
			position: absolute;
			bottom: 20px;
			left: 20px;
			width: 400px;
			background: rgba(255,255,255,0.95);
			border-radius: 12px;
			padding: 20px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.15);
			z-index: 1000;
			transition: all 0.3s ease;
		}
		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 2px solid #f0f0f0;
		}
		.detail-title {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
		.detail-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 15px;
			margin-bottom: 15px;
		}
		.detail-item {
			padding: 10px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.detail-label {
			font-size: 12px;
			color: #909399;
			margin-bottom: 5px;
		}
		.detail-value {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="monitor-container">
			<!-- 控制面板 -->
			<div class="control-panel">
				<h2 style="margin-bottom: 20px; color: #333;">🚛 运输轨迹监控</h2>
				<el-form :inline="true" :model="filterForm">
					<el-form-item label="车辆状态">
						<el-select v-model="filterForm.status" placeholder="全部状态" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="在线" value="online"></el-option>
							<el-option label="离线" value="offline"></el-option>
							<el-option label="异常" value="warning"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="运输线路">
						<el-select v-model="filterForm.route" placeholder="全部线路" style="width: 200px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="衡阳-长沙" value="hy-cs"></el-option>
							<el-option label="衡阳-广州" value="hy-gz"></el-option>
							<el-option label="衡阳市内" value="hy-local"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="车辆编号">
						<el-input v-model="filterForm.vehicleNo" placeholder="输入车牌号" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="filterVehicles">筛选</el-button>
						<el-button @click="resetFilter">重置</el-button>
						<el-button type="success" @click="refreshAll">刷新全部</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 地图区域 -->
			<div class="map-section">
				<div id="amap-container"></div>
				
				<!-- 车辆列表 -->
				<div class="vehicle-list">
					<h3 style="margin: 0 0 15px 0; color: #333;">🚚 车辆列表 ({{ filteredVehicles.length }})</h3>
					<div 
						v-for="vehicle in filteredVehicles" 
						:key="vehicle.id"
						:class="['vehicle-item', vehicle.status, {active: selectedVehicle && selectedVehicle.id === vehicle.id}]"
						@click="selectVehicle(vehicle)"
					>
						<div class="vehicle-header">
							<div class="vehicle-number">{{ vehicle.plateNumber }}</div>
							<div :class="'status-badge status-' + vehicle.status">{{ vehicle.statusText }}</div>
						</div>
						<div class="vehicle-info">
							<div>司机：{{ vehicle.driver }}</div>
							<div>路线：{{ vehicle.route }}</div>
							<div>货物：{{ vehicle.cargo }}</div>
							<div class="temp-display">
								🌡️ 温度：
								<span :class="['temp-value', getTempClass(vehicle.temperature)]">{{ vehicle.temperature }}℃</span>
							</div>
							<div style="margin-top: 5px; font-size: 12px; color: #999;">{{ vehicle.lastUpdate }}</div>
						</div>
					</div>
				</div>

				<!-- 车辆详情弹窗 -->
				<div class="vehicle-detail-popup" v-if="selectedVehicle">
					<div class="detail-header">
						<div class="detail-title">{{ selectedVehicle.plateNumber }} 详情</div>
						<el-button size="mini" type="text" @click="selectedVehicle = null">
							<i class="el-icon-close"></i>
						</el-button>
					</div>
					<div class="detail-grid">
						<div class="detail-item">
							<div class="detail-label">当前位置</div>
							<div class="detail-value">{{ selectedVehicle.currentLocation }}</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">行驶速度</div>
							<div class="detail-value">{{ selectedVehicle.speed }} km/h</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">货厢温度</div>
							<div :class="['detail-value', getTempClass(selectedVehicle.temperature)]">{{ selectedVehicle.temperature }}℃</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">湿度</div>
							<div class="detail-value">{{ selectedVehicle.humidity }}%</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">剩余里程</div>
							<div class="detail-value">{{ selectedVehicle.remainingDistance }} km</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">预计到达</div>
							<div class="detail-value">{{ selectedVehicle.estimatedArrival }}</div>
						</div>
					</div>
					<div style="text-align: center; margin-top: 15px;">
						<el-button size="small" type="primary" @click="trackVehicle(selectedVehicle)">查看轨迹</el-button>
						<el-button size="small" @click="contactDriver(selectedVehicle)">联系司机</el-button>
					</div>
				</div>
			</div>

			<!-- 统计卡片 -->
			<el-row :gutter="20" class="stats-section">
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #67C23A;">{{ stats.online }}</div>
						<div class="stat-label">在线车辆</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #F56C6C;">{{ stats.offline }}</div>
						<div class="stat-label">离线车辆</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #E6A23C;">{{ stats.warning }}</div>
						<div class="stat-label">异常车辆</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="stat-card">
						<div class="stat-number" style="color: #409EFF;">{{ stats.total }}</div>
						<div class="stat-label">总车辆数</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 刷新按钮 -->
		<el-button class="refresh-btn" type="primary" circle @click="refreshAll">
			<i class="el-icon-refresh"></i>
		</el-button>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				filterForm: {
					status: '',
					route: '',
					vehicleNo: ''
				},
				selectedVehicle: null,
				map: null,
				vehicleMarkers: [],
				vehicles: [
					{
						id: 1,
						plateNumber: '湘D·12345',
						status: 'online',
						statusText: '在线',
						driver: '张师傅',
						route: '衡阳-长沙',
						cargo: '衡阳湘莲 2.5吨',
						temperature: 4.2,
						humidity: 65,
						speed: 85,
						currentLocation: '湖南省湘潭市',
						remainingDistance: 80,
						estimatedArrival: '今天 18:30',
						lastUpdate: '2分钟前',
						position: [112.9, 27.8]
					},
					{
						id: 2,
						plateNumber: '湘D·67890',
						status: 'warning',
						statusText: '异常',
						driver: '李师傅',
						route: '衡阳-广州',
						cargo: '衡阳黄花菜 3.2吨',
						temperature: -2.8,
						humidity: 70,
						speed: 0,
						currentLocation: '湖南省郴州市服务区',
						remainingDistance: 240,
						estimatedArrival: '延迟中',
						lastUpdate: '15分钟前',
						position: [113.0, 25.8]
					},
					{
						id: 3,
						plateNumber: '湘D·11111',
						status: 'online',
						statusText: '在线',
						driver: '王师傅',
						route: '衡阳市内',
						cargo: '衡阳大白菜 1.8吨',
						temperature: 6.5,
						humidity: 60,
						speed: 45,
						currentLocation: '衡阳市珠晖区',
						remainingDistance: 15,
						estimatedArrival: '今天 16:00',
						lastUpdate: '1分钟前',
						position: [112.6, 26.9]
					},
					{
						id: 4,
						plateNumber: '湘D·88888',
						status: 'offline',
						statusText: '离线',
						driver: '陈师傅',
						route: '衡阳-长沙',
						cargo: '衡阳茶油 2.0吨',
						temperature: 8.2,
						humidity: 55,
						speed: 0,
						currentLocation: '衡阳市雁峰区',
						remainingDistance: 160,
						estimatedArrival: '未知',
						lastUpdate: '2小时前',
						position: [112.6, 26.9]
					},
					{
						id: 5,
						plateNumber: '湘D·99999',
						status: 'online',
						statusText: '在线',
						driver: '刘师傅',
						route: '衡阳市内',
						cargo: '衡阳土鸡蛋 1.2吨',
						temperature: 5.8,
						humidity: 62,
						speed: 35,
						currentLocation: '衡阳市蒸湘区',
						remainingDistance: 8,
						estimatedArrival: '今天 15:30',
						lastUpdate: '30秒前',
						position: [112.6, 26.9]
					}
				]
			},
			computed: {
				filteredVehicles() {
					let filtered = this.vehicles;
					
					if (this.filterForm.status) {
						filtered = filtered.filter(v => v.status === this.filterForm.status);
					}
					
					if (this.filterForm.vehicleNo) {
						filtered = filtered.filter(v => 
							v.plateNumber.toLowerCase().includes(this.filterForm.vehicleNo.toLowerCase())
						);
					}
					
					return filtered;
				},
				stats() {
					return {
						online: this.vehicles.filter(v => v.status === 'online').length,
						offline: this.vehicles.filter(v => v.status === 'offline').length,
						warning: this.vehicles.filter(v => v.status === 'warning').length,
						total: this.vehicles.length
					};
				}
			},
			mounted() {
				this.initMap();
			},
			methods: {
				initMap() {
					// 初始化地图
					this.map = new AMap.Map('amap-container', {
						zoom: 5,
						center: [108.953098, 34.2778], // 中国中心坐标
						mapStyle: 'amap://styles/whitesmoke'
					});
					
					// 添加地图控件
					this.map.addControl(new AMap.Scale());
					this.map.addControl(new AMap.ToolBar());
					
					// 添加车辆标记
					this.addVehicleMarkers();
				},
				addVehicleMarkers() {
					// 清除现有标记
					this.vehicleMarkers.forEach(marker => {
						this.map.remove(marker);
					});
					this.vehicleMarkers = [];
					
					// 为每个车辆添加标记
					this.filteredVehicles.forEach(vehicle => {
						const iconColor = this.getVehicleColor(vehicle.status);
						const marker = new AMap.Marker({
							position: vehicle.position,
							title: `${vehicle.plateNumber} - ${vehicle.statusText}`,
							icon: new AMap.Icon({
								size: new AMap.Size(40, 40),
								image: 'data:image/svg+xml;base64,' + btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${iconColor}"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>`)
							})
						});
						
						// 添加点击事件
						marker.on('click', () => {
							this.selectVehicle(vehicle);
						});
						
						this.vehicleMarkers.push(marker);
					});
				},
				getVehicleColor(status) {
					switch(status) {
						case 'online': return '#67C23A';
						case 'offline': return '#F56C6C';
						case 'warning': return '#E6A23C';
						default: return '#909399';
					}
				},
				getTempClass(temp) {
					if (temp >= -5 && temp <= 8) return 'temp-normal';
					if (temp > 8 || temp < -10) return 'temp-danger';
					return 'temp-warning';
				},
				selectVehicle(vehicle) {
					this.selectedVehicle = vehicle;
					// 地图中心移动到选中车辆
					this.map.setCenter(vehicle.position);
					this.map.setZoom(10);
				},
				filterVehicles() {
					this.addVehicleMarkers();
					this.$message.success(`筛选完成，找到 ${this.filteredVehicles.length} 辆车辆`);
				},
				resetFilter() {
					this.filterForm = {
						status: '',
						route: '',
						vehicleNo: ''
					};
					this.addVehicleMarkers();
				},
				refreshAll() {
					this.$message.info('正在刷新车辆数据...');
					// 模拟数据更新
					setTimeout(() => {
						this.vehicles.forEach(vehicle => {
							vehicle.lastUpdate = '刚刚';
							// 随机更新温度
							vehicle.temperature += (Math.random() - 0.5) * 0.5;
							vehicle.temperature = Math.round(vehicle.temperature * 10) / 10;
						});
						this.addVehicleMarkers();
						this.$message.success('数据已刷新');
					}, 1000);
				},
				trackVehicle(vehicle) {
					this.$message.info(`查看 ${vehicle.plateNumber} 的详细轨迹`);
					// 这里可以跳转到详细轨迹页面
				},
				contactDriver(vehicle) {
					this.$message.info(`联系司机 ${vehicle.driver}`);
					// 这里可以实现联系司机功能
				}
			}
		});
	</script>
</body>
</html>